<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/WEB-INF/base.jspf"%>
<style>
 #date1 {
	 margin: 2px;  
	 height: 37px;
}

#date2 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
#bdlx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
	margin-top:15px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:550px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:500px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.hidden-c {
	display:none;
}

.btn-c-dealShenQing {
	display:none;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
</style>   
			<div class="layui-inline">
				<div class="layui-inline">
					<input type="text" id="date1" placeholder="开始时间" value=""><br> 
					<input type="text" id="date2" placeholder="结束时间" value="">
				</div>
				<div class="layui-inline">
					<select id="bdlx" style="width:98px;">
						<option value="">变动类型</option>
						<option value="彩票投注">&nbsp;&nbsp;彩票投注</option>
						<!-- <option value="合买投注">&nbsp;&nbsp;合买投注</option>
						<option value="跟单投注">&nbsp;&nbsp;跟单投注</option>
						<option value="彩票撤单">&nbsp;&nbsp;跟单投注</option> -->
						<option value="人工增加">&nbsp;&nbsp;人工增加</option>
						<option value="人工扣除">&nbsp;&nbsp;人工扣除</option>
					</select>
					<button class="layui-btn layui-btn-radius" id="btn_search" style="margin-left:20px;">查询</button>
								<button class="layui-btn layui-btn-radius" id="button-i-resetTableContent" style="margin-left:5px;">重置</button>
					<br>
					<input type="text" id="hymc" placeholder="会员名称"> 
				</div>
			</div>
			<div>
				<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="damajl">
					<thead>
						<tr>
							<th>用户账号</th>
							<th>变动类型</th>
							<th>变动前数量</th>
							<th>变动数量</th>
							<th>变动后数量</th>
							<th>变动时间</th>
							<th>操作人员</th>
							<th>操作备注</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
	<script>
		 layui.use('laydate', function() {
			var laydate = layui.laydate;
			laydate.render({
				elem : '#date1' 
			});
			laydate.render({
				elem : '#date2' 
			});
		}); 
		 
		 function dataTable01(){
				var oTable=	$("#damajl").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/zhgl/findUserCodeRecord.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					      // "bPaginate": true,
					       "bLengthChange": true,      
					      "bSort": false,
					      // "bInfo": true,
					      "bAutoWidth": false,
//					         "bServerSide":true,
					      'aLengthMenu':[5,10, 20], 
					       "searching": false,  
					        "pagingType": "simple_numbers",
					       "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
					       
					       "language": {//语言设置  
					            "lengthMenu": "每页显示 _MENU_ 条记录",     
					            "zeroRecords": "没有检索到数据",     
					            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
					            "info": "没有数据",     
					            "oPaginate": {     
					                "sFirst": "首页",     
					                "sPrevious": "前一页",     
					                "sNext": "后一页",     
					                "sLast": "尾页"    
					          	},
					            "search":"",
					            "searchPlaceholder": "请输入关键字",
					            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
					            "infoEmpty":      "没有找到匹配的信息",
					         },  
					         "columnDefs": [{"defaultContent": "",
	                              "targets": "_all"}],
	                              "columns": [
	 			                     { "data": "huiyuanzh" },
	 			                     { "data": "bdtype" },
	 			                     { "data": "bdqcount" },
	 			                     { "data": "bdcount" },
	 			                     { "data": "bdhcount" },
	 			                     { "data": "createtime" },
	 			                     { "data": "czname" },
	 			                     { "data": "beizhu" }
	 			                 ],	 
					})

		function retrieveData(sSource, aoData, fnCallback) {
					$.ajax({
						url : sSource,//这个就是请求地址对应sAjaxSource
						data : {
							"pageCount":aoData[0].value,
							"startIndex":aoData[3].value,
							"lineCount":aoData[4].value,
							
						},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
						type : 'post',
						dataType : 'json',
						async : false,
						 
						success : function(result) { 
							fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
						},
						error : function(msg) {
						}
					});
				}
			}
		 
			dataTable01();
			insertSearchBtn()
			document.querySelector("#btn_search").addEventListener("click", function(event) {
				if($("#date1").val()=="" && $("#date2").val()=="" &&  $("#bdlx").val()==""
					 && $("#hymc").val()==""){
					 return 
				 }	
				else{
					var oTable=	$("#damajl").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/zhgl/likeFindUserCodeRecord.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					      // "bPaginate": true,
					       "bLengthChange": true,      
					      "bSort": false,
					      // "bInfo": true,
					      "bAutoWidth": false,
//					         "bServerSide":true,
					      'aLengthMenu':[5,10, 20], 
					       "searching": false,  
					      /*  "pagingType": "simple_numbers",
					       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  */
					       
					       "language": {//语言设置  
					            "lengthMenu": "每页显示 _MENU_ 条记录",     
					            "zeroRecords": "没有检索到数据",     
					            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
					            "info": "没有数据",     
					            "oPaginate": {     
					                "sFirst": "首页",     
					                "sPrevious": "前一页",     
					                "sNext": "后一页",     
					                "sLast": "尾页"    
					          	},
					            "search":"",
					            "searchPlaceholder": "请输入关键字",
					            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
					            "infoEmpty":      "没有找到匹配的信息",
					         },  
					         "columnDefs": [{"defaultContent": "",
	                              "targets": "_all"}],
	                              "columns": [
	 			                     { "data": "huiyuanzh" },
	 			                     { "data": "bdtype" },
	 			                     { "data": "bdqcount" },
	 			                     { "data": "bdcount" },
	 			                     { "data": "bdhcount" },
	 			                     { "data": "createtime" },
	 			                     { "data": "bdqtksx" },
	 			                     { "data": "bdtksx" },
	 			                     { "data": "bdhtksx" },
	 			                     { "data": "czname" },
	 			                     { "data": "beizhu" }
	 			                 ],	 
					})

		function retrieveData(sSource, aoData, fnCallback) {
					$.ajax({
						url : sSource,//这个就是请求地址对应sAjaxSource
						data : {
							"pageCount":aoData[0].value,
							"startIndex":aoData[3].value,
							"lineCount":aoData[4].value,
							 "date1":  $('#date1').val(),
		    	        "date2"  :$('#date2').val(),
		    	        "bdtype" : $('#bdlx').val(),
		    	        "huiyuanzh" : $('#hymc').val(),
							
						},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
						type : 'post',
						dataType : 'json',
						async : false,
						 
						success : function(result) { 
							fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
						},
						error : function(msg) {
						}
					});
				}
				}
			})		
			$("#button-i-resetTableContent").on("click", function(event) {
				dataTable01();
			 $('#date1').val("");
	         $('#date2').val("");
	         $('#bdlx').val("");
	         $('#hymc').val("");
		})
	</script>
